import React, { useState } from 'react'
import style from './style.module.css'
import { Steps, Button, message } from 'antd'
import FirstKill from '@/components/KillList/firstKill.jsx'
import SencedKill from '@/components/KillList/SencedKill.jsx'
import axios from 'axios'


const { Step } = Steps;
const SpikeConfigShop = () => {
  const [current, setCurrent] = React.useState(0);
  // 保存子传父
  const [uploadUrl, setUploadUrl] = useState('')
  // 标题
  const [addTitle, setaddTitle] = useState("")
  // 简介
  const [addContent, setaddContent] = useState("")
  // 单位
  const [addOriginal, setaddOriginal] = useState("")
  // 状态
  const [addState,setaddState]=useState('')
  console.log(addState,'state');
  // 配置
  const [addConfiguration,setaddConfiguration]=useState("")
  // 点击下一步将图片保存
  const [uploadUrlList, setUploadUrlList] = useState("")
  // 点击下一步
  const next = () => {
    setCurrent(current + 1);
    let uploadurllist = uploadUrl
    setUploadUrlList(uploadurllist)
    if (!uploadurllist) {
      message.error('请选择图片')
    } else {
      setCurrent(current + 1)
    }
  };
  const prev = () => {
    setCurrent(current - 1);
  };
  // 传图片
  const AddUpload = (data) => {
    // console.log(data, 'data');
    setUploadUrl(data)
  }
  // 配置
  const addconfiguration=(data)=>{
    setaddConfiguration(data)
  }
  // 传标题
  const addtitle = (data) => {
    setaddTitle(data)
  }
  //简介
  const addcontent = (data) => {
    setaddContent(data)
  }
  // 单位
  const addoriginal = (data) => {
    setaddOriginal(data)
  }
 
  const steps = [
    {
      title: '选择秒杀商品',
      content: <FirstKill AddUpload={AddUpload} />,
    },
    {
      title: '填写基础信息',
      content: <SencedKill
        uploadUrlList={uploadUrlList}
        addTitle={addtitle}
        addContent={addcontent}
        addOriginal={addoriginal}
        addConfiguration={addconfiguration}
      />,
    },
  ];
  // 提交
  const submit=()=>{
    axios({
      url:'/api/addshoplist',
      method:'post',
      data:{
        title:addTitle,
        content:addContent,
        img:uploadUrl,
        original:addOriginal,
        configuration:addConfiguration,
        // state:addState
      }
    }).then(res=>{
      message.success('添加成功');
      console.log(res);
    })
  }
  return (
    <div className={style.SpikeConfigShopBox}>
      <div className={style.SpikeConfigShopHeader}>
      </div>
      <div className={style.SpikeConfigShopMain}>
        <Steps current={current}>
          {steps.map(item => (
            <Step key={item.title} title={item.title} />
          ))}
        </Steps>
        <div className="steps-content">{steps[current].content}</div>
        <div className="steps-action">
          {current < steps.length - 1 && (
            <Button type="primary" onClick={() => next()}>
              下一步
            </Button>
          )}
          {current === steps.length - 1 && (
            <Button type="primary" onClick={() => submit()}>
              提交
            </Button>
          )}
          {current > 0 && (
            <Button style={{ margin: '0 8px' }} onClick={() => prev()}>
              上一步
            </Button>
          )}
        </div>
      </div>
    </div>
  )
}
export default SpikeConfigShop